<!-- 通知 -->
<style lang="scss">
.pro-crm-home-message-notice {
  .list-item {
    padding: 10px 0;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 2%;
      height: 1px;
      width: 98%;
      background: #f3f3f3;
    }
    .photo {
      position: absolute;
      top: 15px;
      left: 0;
    }
    .contright {
      margin-left: 36px;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
        line-height: 24px;
        padding-left: 20px;
        position: relative;
        &::before {
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 100%;
          background: #e4e4e4;
          position: absolute;
          left: 5px;
          top: 10px;
        }
        &.unread {
          color: #333333;
        }
        &.unread::before {
          background: #d24d57;
        }
        &:hover {
          color: #2f6bcf;
        }
        .date {
          position: absolute;
          right: 0;
          color: #868686;
          font-size: 12px;
        }
      }
      .rb-icon {
        position: absolute;
        bottom: 10px;
        right: 0;
        color: #868686;
        .item:nth-child(2) {
          margin-left: 10px;
        }
        i {
          font-size: 14px;
        }
      }
      .content {
        font-size: 12px;
        line-height: 26px;
        color: #868686;
        padding: 0 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .actions {
        position: absolute;
        right: 5px;
        bottom: 10px;
        i {
          color: #cccccc;
          cursor: pointer;
          margin: 0 5px;
          font-size: 12px;
          &.edit {
            font-size: 14px;
          }
          &:hover {
            color: #2f6bcf;
          }
        }
      }
    }
  }
  .itemview-searchbar {
    .searchbox {
      .el-dropdown {
        cursor: pointer;
        color: #0050a0;
        margin-right: 10px;
      }
      .keyword-input {
        width: 130px;
      }
      .date-input {
        width: 230px;
      }
    }
  }
}
</style>
<template>
  <div>
    <item-view
      ref="list"
      class="pro-crm-home-message-notice"
      :total-count="totalCount"
      :loading="loading"
      :visible="visible"
      :menu-data="menuData"
      :title="$t('_message.notice')"
      @buildData="buildData"
      @slectMsgType="slectMsgType"
      @readAll="readAll"
      :unreadCount="unreadCount"
      v-show="visible"
    >
      <div slot="listitem" class="list-item" v-for="(item,index) in data" :key="item">
        <!-- 头像 -->
        <div v-html="getPhoto(item)" class="photo" />
        <div class="contright">
          <div
            class="title"
            :class="{'unread':item.USERMSG_YD != '1'}"
            @click="showInfo(item,index)"
          >
            <span v-html="formatKeyword(item.USERMSG_BT)"></span>
            <span class="date">
              <span v-html="formatKeyword(item.SY_CREATEUSERNAME)"></span>
              {{formatTime(item.SY_CREATETIME)}}
            </span>
            <!-- <span>
              <el-tooltip :content="打开消息" class="item" effect="dark" placement="bottom-start">
                <i @click="itemClick(item,index)" class="fa fa-file-text-o" />
              </el-tooltip>
            </span>-->
          </div>
          <div class="rb-icon">
            <el-tooltip
              v-if="item.USERMSG_YD != '1'"
              class="item"
              effect="dark"
              content="设为已读"
              placement="bottom"
            >
              <i @click="doRead(item)" class="fa fa fa-eye" />
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="打开单据" placement="bottom">
              <i @click="showForm(item)" class="fa fa-file-text-o" />
            </el-tooltip>-->
          </div>
          <div class="content" v-html="item.USERMSG_NR" @click="showInfo(item,index,true)"></div>

          <!--寻呼
          <div
            class="content"
            v-if="item.USERMSG_MSGTYPE_CODE == 'WY'"
            @click="showInfo(item,index,true)"
          >{{item.SY_CREATEUSERNAME}}于{{item.SY_CREATETIME}}提交给您一条{{item.USERMSG_BT}}寻呼消息，请及时查看。</div>
          <div
            class="content"
            v-if="item.USERMSG_MSGTYPE_CODE == 'HY'"
            @click="showInfo(item,index,true)"
          >{{item.USERMSG_NR.substring(0,32)}}...</div>
          <div
            class="content"
            v-if="item.USERMSG_MSGTYPE_CODE == 'GSTX'"
            @click="showInfo(item,index,true)"
          >{{item.USERMSG_NR}}</div>
          <div
            class="content"
            v-if="item.USERMSG_MSGTYPE_CODE == 'LX'"
            @click="showInfo(item,index,true)"
          >{{item.USERMSG_NR}}</div>-->
        </div>
      </div>
    </item-view>
    <notice-dialog v-if="dialogVisible" @closeDialog="closeDialog" :noticeInfo="noticeInfo"></notice-dialog>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import ItemView from './item_view.vue'
import Util from '../../util/util.js'
import spe from './../../assets/lang/message/speNationalList'
import getLang from './../../assets/lang/mergeLang'
import noticeDialog from '../../components/noticeDialog'
const i18n = new VueI18n({
  locale: 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [
      { name: '_message', data: require('./../../assets/lang/message/zh') },
    ]), // 中文语言包
    en: getLang('en', [
      { name: '_message', data: require('./../../assets/lang/message/en') },
    ]), // 英文语言包
  },
})
export default {
  name: 'message-notice',
  components: {
    ItemView,
    noticeDialog,
    // LogInfo,
    //  MailDetail
  },
  i18n,
  data() {
    return {
      activeMsgType: 'all',
      loading: true,
      visible: false,
      data: [],
      unreadCount: 0,
      totalCount: 0, //总条数，绑定分页条
      lang: 'zh_CN',
      menuData: [],
      mailItem: [], // 寻呼信息
      msgType: '',
      dialogVisible: false, // 消息详情弹框显示
      noticeInfo: {},
    }
  },
  mounted() {
    if (Cookies.get('je-local-lang')) {
      this.$i18n.locale = Cookies.get('je-local-lang')
      this.lang = Cookies.get('je-local-lang')
    } else {
      Cookies.set('je-local-lang', this.$i18n.locale)
    }
    var me = this
    me.$nextTick(function () {
      me.getList().load()
    })
    this.initMenuData()
  },
  computed: {
    msgTypes() {
      var items = JE.getDicItems('JE_CORE_MSGTYPE')
      var _items = [
          { code: 'all', text: this.lang == 'zh_CN' ? '全部消息' : 'ALL' },
        ],
        excloud = [
          'PZ',
          'BUBBLE',
          'WF',
          'TRANSACTION',
          // 'MSG',
          // ++++++++++
          'RZ',
          'RC',
          'XSSLH',
          'XS',
          'XSXS',
          'KH',
          'GH',
          'HTHK',
        ]
      Ext.each(items, function (item) {
        if (excloud.indexOf(item.code) == -1) {
          _items.push(item)
        }
      })
      // _items.forEach((item) => {
      //   if (item.code == 'WY') {
      //     this.$set(item, 'text', '寻呼')
      //   }
      // })
      return _items
    },
    activeMsgText() {
      var text = '',
        activeType = this.activeMsgType
      Ext.each(this.msgTypes, function (type) {
        if (activeType == type.code) {
          text = type.text
          return false
        }
      })
      return text
    },
  },
  methods: {
    getPhoto(item) {
      return JE.getUserPhoto(item.SY_CREATEUSERID, true)
    },
    // 获取消息类型
    getMsgTypes() {
      var items = JE.getDicItems('JE_CORE_MSGTYPE')
      var _items = [
          { code: 'all', text: this.lang == 'zh_CN' ? '全部消息' : 'ALL' },
        ],
        excloud = [
          'PZ',
          'BUBBLE',
          'WF',
          'TRANSACTION',
          // 'MSG',
          // ++++++++++
          'RZ',
          'RC',
          'XSSLH',
          'XS',
          'XSXS',
          'KH',
          'GH',
          'HTHK',
        ]
      Ext.each(items, function (item) {
        if (excloud.indexOf(item.code) == -1) {
          _items.push(item)
        }
      })
      return _items
    },
    initMenuData() {
      let msgTypes = this.getMsgTypes()
      this.menuData = msgTypes
    },
    changeMsgType: function (code) {
      this.activeMsgType = code
      this.getList().load()
    },
    setVisible: function (visible) {
      this.visible = visible
    },
    getList() {
      return this.$refs.list
    },
    formatTime: function (time) {
      return Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'm/d H:i')
    },
    getParams: function () {
      var params = this.getList().getParams()
      params.tableCode = 'JE_SYS_USERMSG'
      params.orderSql = 'ORDER BY SY_CREATETIME DESC'
      params.whereSql = "AND USERMSG_JSR_ID='" + JE.USER.userId + "'"

      //消息类型
      var types = []
      if (this.activeMsgType == 'all') {
        Ext.each(this.msgTypes, function (type) {
          type.code != 'all' && types.push(type.code)
        })
      } else {
        types.push(this.activeMsgType)
      }

      if (JE.isNotEmpty(types)) {
        params.whereSql +=
          " AND USERMSG_MSGTYPE_CODE IN ('" + types.join("','") + "')"
      }
      //读取状态
      if (JE.isNotEmpty(params.readStatus) && params.readStatus != 'ALL') {
        params.whereSql +=
          " AND USERMSG_YD = '" + (params.readStatus == 'YD' ? '1' : '0') + "'"
      }
      //关键字
      if (JE.isNotEmpty(params.keyword)) {
        params.whereSql +=
          " AND (USERMSG_BT like '%" +
          params.keyword +
          "%'  OR SY_CREATEUSERNAME like '%" +
          params.keyword +
          "%'  OR USERMSG_NR like '%" +
          params.keyword +
          "%')"
      }
      //时间
      if (JE.isNotEmpty(params.startTime)) {
        params.whereSql +=
          " AND (USERMSG_JSSJ>'" +
          params.startTime +
          "' AND USERMSG_JSSJ<'" +
          params.endTime +
          "')"
      }
      return params
    },
    formatKeyword: function (text) {
      var keyword = this.getList().keyword
      return Util.formatKeyword(text, keyword)
    },
    refresh: function () {
      this.getList().load()
    },
    slectMsgType(val) {
      this.activeMsgType = val
    },
    /**
     * 加载数据
     */
    buildData: function (callback) {
      var me = this
      me.loading = true
      JE.ajax({
        url: '/je/portal/homePortal/loadUserMsg',
        params: me.getParams(),
        async: true,
        success: function (response) {
          var data = JE.getAjaxData(response)
          me.data = data.rows
          me.totalCount = data.totalCount
          callback(data)
          me.$emit('doact', 'refreshBadge', {
            type: 'MSG',
            num: true,
            numObj: {
              msgCount: data.noReadCount,
            },
          })
          me.unreadCount = data.noReadCount
          me.loading = false
        },
      })
    },
    /**
     * 全部已读
     */
    readAll: function () {
      var me = this
      JE.ajax({
        url: '/je/portal/homePortal/readAllUserMsg',
        async: true,
        success: function (response) {
          var data = JE.getAjaxData(response)
          if (data.success) {
            me.getList().load()
            JE.msg(me.lang == 'zh_CN' ? '设置成功！' : 'Setup successful!')
          }
        },
      })
    },
    childRefresh() {
      this.$refs.list._buildData()
    },
    // 消息详情
    showInfo(item, index, flag) {
      const that = this
      // if (!flag) {
       if(JE.isNotEmpty(item.FUNCCODE) && "FORM"==item.USERMSG_SHOWVIEW){
          JE.showFunc(item.FUNCCODE,{
              type:"form",
              useChild:true,
              funcCode:item.FUNCCODE,
              id:item.USERMSG_YW_ID
            })  
       }else{
        that.noticeInfo = { ...item }
        that.dialogVisible = true
       }
      // const win = JE.win({
      //   title: me.lang == 'zh_CN' ? '消息查看' : 'Message view',
      //   width: 750,
      //   height: 450,
      //   autoShow: true,
      //   buttons: [
      //     {
      //       text: me.lang == 'zh_CN' ? '关闭' : 'Close',
      //       cls: 'JEPLUS_B_L10',
      //       handler: function (btn) {
      //         btn.up('window').close()
      //       },
      //     },
      //   ],
      //   buttonAlign: 'center',
      //   html:
      //     '<div style="line-height: 2;font-size: 16px;padding: 10px 20px;text-indent: 24px;cursor: pointer;">' +
      //     item.USERMSG_NR +
      //     '</div>',
      // })
      // win.on('close', function () {
      //   me.childRefresh()
      // })
      // }
      if (item.USERMSG_YD == '0') {
        Util.doReadMark('notice', item.JE_SYS_USERMSG_ID)
        item.USERMSG_YD = '1'
        this.$set(this.data, index, item)
      }
    },
    // 关闭消息详情弹框
    closeDialog(obj) {
      this.dialogVisible = false
    },
    /**
     * 查看详情（修改之后）
     */
    // showInfo(item, index, flag) {
    // console.log('此条消息信息：', item)
    // var me = this
    // if (item.USERMSG_MSGTYPE_CODE == 'GSTX') {
    //   JE.showFunc('OA_XMGL_GSGL', {})
    // } else if (item.USERMSG_MSGTYPE_CODE == 'LX') {
    //   JE.showFunc('HR_LDL_CJGL', {
    //     type: 'form',
    //     id: item.USERMSG_YW_ID,
    //   })
    // } else if (item.USERMSG_MSGTYPE_CODE == 'WY') {
    //   let that = this
    //   var obj = JE.ajax({
    //     url: '/je/load',
    //     params: {
    //       tableCode: 'JE_CORE_INFORM',
    //       whereSql: "AND JE_CORE_INFORM_ID = '" + item.USERMSG_YW_ID + "'",
    //     },
    //   })
    //   this.mailItem = obj.rows[0]
    //   that.$refs.mailDetail.detailVisible = true
    // } else if (item.USERMSG_MSGTYPE_CODE == 'HY') {
    //   var obj = JE.ajax({
    //     url: '/je/load',
    //     params: {
    //       tableCode: 'OA_HYGL_HYSQ',
    //       whereSql: "AND OA_HYGL_HYSQ_ID = '" + item.USERMSG_YW_ID + "'",
    //     },
    //   })

    //   console.log('会议信息', obj.rows[0])
    //   const win = JE.win({
    //     title: me.lang == 'zh_CN' ? '消息查看' : 'Message view',
    //     width: 750,
    //     height: 450,
    //     autoShow: true,
    //     buttons: [
    //       {
    //         text: me.lang == 'zh_CN' ? '关闭' : 'Close',
    //         cls: 'JEPLUS_B_L10',
    //         handler: function (btn) {
    //           btn.up('window').close()
    //         },
    //       },
    //     ],
    //     buttonAlign: 'center',
    //     html:
    //       '<div style="line-height: 2;font-size: 16px;padding: 10px 20px;text-indent: 24px;cursor: pointer;"> ' +
    //       '<p style="font-size: 18px">' +
    //       item.USERMSG_NR +
    //       '</p>' +
    //       '<p>发起人：' +
    //       obj.rows[0].SY_CREATEUSERNAME +
    //       '</p>' +
    //       '<p>发送时间：' +
    //       obj.rows[0].SY_CREATETIME +
    //       '</p>' +
    //       '<p>会议标题：' +
    //       obj.rows[0].HYSQ_HYMC +
    //       '</p>' +
    //       '<p>开始时间：' +
    //       obj.rows[0].HYSQ_KSSJ +
    //       '</p>' +
    //       '<p>结束时间：' +
    //       obj.rows[0].HYSQ_JSSJ +
    //       '</p>' +
    //       '<p>会议室：' +
    //       obj.rows[0].HYSQ_HYSMC +
    //       '</p>' +
    //       '<p>会议参与人：' +
    //       obj.rows[0].HYSQ_NBCHR_NAME +
    //       '</p>' +
    //       '</div>',
    //   })
    //   win.on('close', function () {
    //     me.childRefresh()
    //   })
    // } else {
    //     if (!flag) {
    //       const win = JE.win({
    //         title: me.lang == 'zh_CN' ? '消息查看' : 'Message view',
    //         width: 750,
    //         height: 450,
    //         autoShow: true,
    //         buttons: [
    //           {
    //             text: me.lang == 'zh_CN' ? '关闭' : 'Close',
    //             cls: 'JEPLUS_B_L10',
    //             handler: function (btn) {
    //               btn.up('window').close()
    //             },
    //           },
    //         ],
    //         buttonAlign: 'center',
    //         html:
    //           '<div style="line-height: 2;font-size: 16px;padding: 10px 20px;text-indent: 24px;cursor: pointer;">' +
    //           item.USERMSG_NR +
    //           '</div>',
    //       })
    //       win.on('close', function () {
    //         me.childRefresh()
    //       })
    //     // }
    //   }
    //   // 未读设为已读
    //   if (item.USERMSG_YD == '0') {
    //     Util.doReadMark('notice', item.JE_SYS_USERMSG_ID)
    //     item.USERMSG_YD = '1'
    //     this.$set(this.data, index, item)
    //   }
    // },
    // 打开单据
    showForm(item) {},
    // 点击设为已读
    doRead(item) {
      Util.doReadMark('notice', item.JE_SYS_USERMSG_ID)
      this.getList().load()
    },
    getEn(cn) {
      if (!cn) return
      if (this.$i18n.locale == 'zh_CN') return cn
      return spe[cn] || cn
    },
  },
}
</script>


